<template>
  <div class="user-list">
    <div class="main-content">
      <div class="content-wrap">
        <div class="search-wrap">
          <el-form :inline="true" :model="params">
            <el-row>
              <el-form-item label="用户角色">
                <el-select
                  class="sel-width"
                  v-model="value"
                  placeholder="请选择"
                  clearbaler
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="用户名">
                <el-input
                  v-model="params.name"
                  placeholder="请输入用户名"
                ></el-input>
              </el-form-item>
              <el-col :span="7">
                <div class="btn-wrap">
                  <el-button :icon="Search" type="primary" @click="getList"
                    >查询</el-button
                  >
                  <button class="add" @click="handleAdd">
                    <Svg
                      name="add"
                      color="#fff"
                      width="20"
                      height="20"
                      style="margin-top: 5px"
                    ></Svg>
                    <span>新增</span>
                  </button>
                  <button class="edit" @click="editUser">
                    <Svg
                      name="edit"
                      color="#fff"
                      width="20"
                      height="25"
                      style="margin-top: 3px"
                    >
                    </Svg>
                    <span>编辑</span>
                  </button>
                  <button class="del-btn">
                    <img src="./images/del-icon.png" alt="" />
                    删除
                  </button>
                  <!-- <button class="export-btn">清除</button> -->
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <div class="table-data">
          <el-table class="table-height" :data="tableData">
            <el-table-column type="selection" align="center"> </el-table-column>
            <el-table-column
              v-for="item in tableItem"
              :prop="item.prop"
              :label="item.label"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <Pagination
            v-model:currentPage="params.currentPage"
            :total="total"
            v-model:page-size="params.pageSize"
          />
        </div>
      </div>
    </div>
    <Dialog
      v-model:showDialog="showDiaLog"
      :headerName="addUserFlaf ? '新增' : '编辑'"
      diaWidth="28"
      footerPadding="0 0"
      diaTop="20"
    >
      <template #content>
        <div class="dia-content">
          <el-form :model="diaForm" label-width="120px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="用户名">
                  <el-input
                    :class="addUserFlaf ? '' : 'add-bgc'"
                    clearbaler
                    v-model="diaForm.fs"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="登录账号">
                  <el-input
                    clearbaler
                    :class="addUserFlaf ? '' : 'add-bgc'"
                    v-model="diaForm.fs"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
           
            <el-row>
              <el-col :span="24">
                <el-form-item label="登录密码">
                  <el-input
                    clearbaler
                    :class="addUserFlaf ? '' : 'add-bgc'"
                    v-model="diaForm.fs"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="角色名称">
                  <el-select
                    clearbaler
                    v-model="value"
                    :class="addUserFlaf ? '' : 'add-bgc'"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    /> </el-select></el-form-item
              ></el-col>
            </el-row>

            <el-row v-if="!addUserFlaf">
              <el-col :span="24">
                <el-form-item label="状态">
                  <el-select
                    clearbaler
                    v-model="value"
                    :class="addUserFlaf ? '' : 'add-bgc'"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    /> </el-select
                ></el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
    </Dialog>
  </div>
</template>
<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
let showDiaLog = ref(false);
let selVal = ref(1);
let diaForm = reactive({});
let params = reactive({});
let options = [{ label: 1, value: 1 }];
let addUserFlaf = ref(true);
const defaultProps = {
  children: "children",
  label: "label",
};
let total = ref(1);
let handleAdd = () => {
  addUserFlaf.value = true;
  showDiaLog.value = true;
};
let tableItem = ref([
  {
    prop: "date",
    label: "用户名",
  },
  {
    prop: "date",
    label: "登录账号",
  },
  {
    prop: "date",
    label: "角色名称",
  },
  {
    prop: "date",
    label: "状态",
  },

  {
    prop: "date",
    label: "最近登录时间",
  },
]);

const tableData = [
  {
    date: "10-2",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },

  {
    date: "基波电压(V)",

    name: "基波电流",
  },
];
let editUser = () => {
  console.log(11);
  addUserFlaf.value = false;
  showDiaLog.value = true;
};
let getList = () => {};

const data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1",
          },
        ],
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1",
          },
        ],
      },
    ],
  },
];
</script>
<style lang="scss" scoped>
.user-list {
  width: 100%;

  margin-top: 9px;
  display: flex;

  .main-content {
    display: flex;
    width: 100%;
    flex-direction: column;

    flex-shrink: 0;
    .content-wrap {
      height: calc(100vh - 168px - 9px);
      background-color: #022552;
      width: 100%;
      padding-top: 19px;
      padding-left: 15px;
      padding-right: 21px;
      .table-data {
        height: 630px;
        margin-top: 22px;
        width: 1590px;
        .btn-wrap {
          display: flex;
          justify-content: center;
        }
        .distribute {
          width: 73px;
          height: 31px;
          background: rgba(97, 200, 255, 0.28);
          border: 1px solid #61c8ff;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #ffffff;
          cursor: pointer;
        }
        .table-height {
          height: 615px;
          width: 1590px;
        }
        /* :deep(.el-table__header thead) {
          background: url("./images/table-header-bgc.png") no-repeat;
          background-size: 100% 100%;
          width: 100%;
        } */
        /* :deep(.el-table__header thead) {
          background: url("./images/table-header-bgc.png") no-repeat;
          background-size: 100% 100%;
       
          width: 100%;
        } */
        :deep(.el-table__row) {
          height: 56.2px !important;
          background-color: #022552 !important;

          .cell {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 16px;
            color: #fefefe;
          }
        }
      }
      .pagination {
        padding-right: 10px;
        padding-top: 8px;
      }
      .search-wrap {
        padding-left: 32px;
        padding-top: 8px;
        span {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #ffffff;
        }

        .sel-width {
          width: 220px;
        }
        .del-btn {
          display: flex;
          align-items: center;
          width: 81px;
          height: 35px;
          background: rgba(133, 18, 20, 0.4);
          border: 1px solid #ff2222;

          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 18px;
          color: #fefefe;
          padding-left: 11px;
          margin-left: 17px;
          img {
            width: 15px;
            height: 17px;
            margin-right: 7px;
          }
        }
        .btn-wrap {
          display: flex;
          align-items: center;
          .add {
            min-width: 81px;
            height: 35px;
            background: rgba(31, 144, 12, 0.4);
            border: 1px solid #06ff34;
            margin-left: 16px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .edit {
            display: flex;
            margin-left: 15px;
            justify-content: center;
            min-width: 81px;
            display: flex;
            justify-content: center;
            align-items: center;

            height: 35px;
            background: rgba(255, 218, 28, 0.4);
            border: 1px solid #ffda1c;

            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 18px;
            color: #fefefe;
          }
          .export-btn {
            width: 81px !important;
            height: 35px;
            background: rgba(31, 144, 12, 0.4);
            border: 1px solid #06ff34;
            margin-left: 20px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 18px;
            color: #fefefe;

            align-items: center;

            cursor: pointer;
          }
        }

        :deep(.el-col.el-col-1.is-guttered) {
          padding-left: 0px !important;
        }
        :deep(.el-date-editor) {
          width: 300px !important;
        }

        :deep(.el-form-item) {
          margin-bottom: 0px;
        }
        :deep(.el-button) {
          width: 84px;
          height: 35px;
          background: rgba(27, 168, 255, 0.35);
          border: 1px solid #61c8ff;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 18px;
          color: #fefefe;
          border-radius: 0px;

          svg {
            width: 50px !important;
            height: 17px !important;
          }
        }
      }
    }
  }
  .dia-content {
    padding-right: 20px;
    padding-top: 20px;
    :deep(.el-row) {
      margin-top: 10px;
    }

    .warning-detail :deep(.el-textarea__inner) {
      background-color: #235b87;
    }
    :deep(.el-input__wrapper) {
      height: 35px !important;
      border: 1px solid #2177bd;
      background-color: transparent;
      border-radius: 0;
    }
    .add-bgc {
   
      background: rgba(97, 200, 255, 0.35);
      border:none;
      border: 1px solid #61c8ff;
    }
  }
}
</style>
